<!DOCTYPE html>
<html>
<head>
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, user-scalable=no, initial-scale=1.0" name="viewport">
        <link href="dqyd.css" rel="stylesheet">
        <title>小球运动</title>
        <script type="text/javascript">
				function start() {
					var box = document.getElementById("box");
				    var mars = document.getElementById("mars0");
					var x0=mars.getBoundingClientRect().left;
					var y0=mars.getBoundingClientRect().top;

					var k = 100,t;
					t = setInterval(function() {

						var d=document.createElement("div");

									d.style.width="5px";
									d.style.height="5px";
									d.style.background="red";
									d.style.borderRadius="50%";
									d.style.position="absolute";
									document.body.appendChild(d);
									d.style.left = mars.getBoundingClientRect().left + "px";
									d.style.top = mars.getBoundingClientRect().top  + "px";
						k--;
						if ( mars.getBoundingClientRect().left==x0 &&  mars.getBoundingClientRect().top==y0) {
							clearInterval(t); //小球达到边界时，清除setInterval
						}
					}, 60);
				}
			</script>

    </head>
</head>
<body>
<div id="box">
    <div class="sun" id="sun0" onclick="start()" title="演示开始">
        <div class="earth">
            <div class="moon">
                <div class="Mercury">
                    <div class="Mars" id="mars0"></div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
